<template>
  <div class="cyclingbox">
    <div class="cycling-top">
      <h5>骑行</h5>
      <span class="icon iconfont icon-dingwei" @click="toCyclingmap"></span>
      <span class="icon iconfont icon-settings" @click="toCyclingset"></span>
      <div class="jindu">
        <div class="cricle">
          <progress-bar type="circle" ref="circle" class="progress" :options="optiones"></progress-bar>
          <div class="min">
            <p class="num">0</p>
            <p>公里</p>
          </div>
        </div>
        <div class="tian">目标:10公里</div>
      </div>
      <div class="benzhou">
        <div class="time">
          <span>打卡</span>
          <p>0</p>
        </div>
        <div class="paiming">
          <span>用时</span>
          <p>00:00:00</p>
        </div>
      </div>
       <div class="stop" @click="stopStart">
        <span v-show="flag" @click="handleStop">暂停</span>
        <span v-show="!flag" @click="handleStart">开始</span>
      </div>
    </div>
    <div class="cycling-bottom">
      <h5>周好友健走排名</h5>
      <ul>
        <li  v-for="(item,index) in paiming"  :key="index">
          <span class="num">{{index+1}}</span>
          <div class="photo">
            <img :src="item.img" alt="">
          </div>
          <div class="name">{{item.name}}</div>
          <div class="step">{{item.long}}</div>
        </li>
      </ul>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      paiming:[],
      flag:true,
       optiones: {
        color: "#333",
        strokeWidth: 3,
        trailColor: "#333",
        trailWidth: 3,
        alignToBottom: true,
        autoStyleContainer: true,
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: "#333",
          position: "absolute",
          left: "0%",
          top: "0%",
          padding: 0,
          margin: 0,
          // You can specify styles which will be browser prefixed
          transform: {
            prefix: true,
            value: "translate(0%, 0%)"
          }
        },
        duration: 5000
      },
    }
  },
  mounted() {
      this.$refs.circle.animate(0.5, {
      step: function(state, circle, attachment) {
        // console.log(111,state,circle);
        circle.path.setAttribute("stroke", "rgb(254, 217, 6)");
      }
    });
      this.api.GetPaiming().then(res => {
      // console.log(res.data.Paiming);
      this.paiming = res.data.Paiming;
    });
  },
  methods: {
    toCyclingset(){
      this.$router.push('/cyclingset')
    },
    toCyclingmap(){
      this.$router.push('/cyclingmap')
    },
    stopStart() {
      this.flag = !this.flag;
     
    },
    handleStop() {
      this.$refs.circle.stop();
    },
    handleStart() {
      this.$refs.circle.animate(0.9, {
        step: function(state, circle, attachment) {
          // console.log(111,state,circle);
          circle.path.setAttribute("stroke", "rgb(254, 217, 6)");
        }
      });
    }
  },
};
</script>

<style lang="less" scoped>
.cyclingbox {
  height: 100%;
  background: rgb(239, 239, 239);
  .cycling-top {
    font-size: 0.5rem;
    height: 6rem;
    background: #fff;
    overflow: hidden;
    position: relative;
    h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
    .icon-dingwei {
      float: right;
      font-size: 0.4rem;
      margin-top: -0.5rem;
      margin-right: 1.3rem;
    }
    .icon-settings {
      float: right;
      font-size: 0.4rem;
      margin-top: -0.5rem;
      margin-right: 0.5rem;
    }
    .jindu {
      position: relative;
      .cricle {
        font-size: 0.4rem;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 100%;
        position: absolute;
        right: 2.5rem;
        text-align: center;
          .progress{
        transform:rotate(-140deg)
      }
        .min {
           position: relative;
          top: -2rem;
          margin-top: 0.3rem;
          margin-top: 0.3rem;
          .num {
            font-size: 0.6rem;
          }
        }
      }
      .tian {
        font-size: 0.3rem;
        text-align: center;
        line-height: 0.4rem;
        width: 1.7rem;
        height: 0.5rem;
        background: #fff;
        position: absolute;
        top: 2.1rem;
        left: 2.9rem;
      }
    }
     .benzhou{
      margin-top: 2.7rem;
      font-size:0.28rem; 
      line-height: 0.5rem;
      font-weight: 500;
      .time{
        text-align: right;
        width: 40%;
        height: 1rem;
        float: left;
        p{
          margin-right: 0.15rem;;
        }
      }
      .paiming{
        text-align: left;
        width: 40%;
        height: 1rem;
        float: right;
        p{
          margin-left: -0.24rem;;
        }
      }
    }
    .stop{
        width: 4rem;
        height: 0.8rem;
        border-radius:50px; 
        text-align: center;
        font-size: 0.5rem;
        background: rgb(254, 217, 6);
        position: absolute;
        bottom: 0.3rem;
        left:1.8rem;

    }
  }
  .cycling-bottom{
    font-size: 0.5rem;
    width: 100%;
    margin-top: 0.3rem;
    background: #fff;
    overflow: hidden;
     h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
      ul{
      li{
        .num{
          float: left;
         font-size: 0.5rem;
          width: 0.7rem;
          text-align: center;
        }
        .photo{
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 100%;
          float: left;
          margin-left: 0.3rem;
          overflow: hidden;
        }
        .name{
          float: left;
          margin-left: 0.4rem;
          font-size: 0.35rem;
          line-height: 0.8rem
        }
        .step{
          float: right;
          font-size: 0.35rem;
           line-height: 0.8rem
        }
      }
     
    }
     .kong{
        height: 1.2rem;
      }
    li{
      width: 95%;
      height: 0.5rem;
      margin: 0.2rem auto;
      margin-bottom:0.5rem ;
      img{
        width: 100%
      }
    }
  }
}
</style>